<template>
  <el-dialog :title="'添加商品'" :close-on-click-modal="false" :visible.sync="visible" @closed="cancel" width="80%">
    <el-container style="height: 500px; border: 1px solid #E0E0E0">
      <el-aside width="250px" style="border-right: 1px solid #E0E0E0;">
        <div class="goods-cat">
          <div class="title-div">
            <i class="el-icon-menu"></i>
            商品分类
          </div>
          <el-tree ref="goodsCatTree" class="goods-cat-tree"
            :data="goodsCats"
            node-key="id"
            :props="goodsCatsTreeProps"
            :default-expand-all="true"
            :expand-on-click-node="false"
            @node-click="handleGoodsCatClick"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
            </span>
          </el-tree>
        </div>
      </el-aside>

      <el-container>
        <el-main>
          <el-form :inline="true" :model="dataForm" @keyup.enter.native="getGoodsList()">
            <el-form-item>
              <el-input v-model="dataForm.goodsName" placeholder="商品名称搜索" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="getGoodsList()">查询</el-button>
            </el-form-item>
          </el-form>
          <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
            <el-table-column type="selection" header-align="center" align="center" width="50" :selectable="selectable">
            </el-table-column>
            <el-table-column prop="goodsName" header-align="center" align="center" label="商品名称">
            </el-table-column>
            <el-table-column prop="catName" header-align="center" align="center" label="商品分类">
            </el-table-column>
            <el-table-column prop="goodsUnit" header-align="center" align="center" label="单位">
            </el-table-column>
            <el-table-column prop="goodsPrice" header-align="center" align="center" label="单价">
            </el-table-column>
            <el-table-column header-align="center" align="center" label="折扣率">
              <template slot-scope="scope">
                <span>{{ scope.row.goodsDiscount + '%'}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="num" header-align="center" align="center" label="库存">
            </el-table-column>
            <el-table-column header-align="center" align="center" label="卡类型使用限制">
              <template slot-scope="scope">
                <span>{{ getCardTypeStr(scope.row.cardType) }}</span>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </el-main>
      </el-container>
    </el-container>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel()">取消</el-button>
      <el-button type="primary" :disabled="dataListSelections.length == 0" @click="addGoods()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import {
    treeDataTranslate
  } from '@/utils'
  export default {
    props: {
      companyId: {
        type: Number,
        default: function(){
          return null
        }
      },
      shopId: {
        type: Number,
        default: function(){
          return null
        }
      },
      cardType: {
        type: Number,
        default: function(){
          return null
        }
      }
    },
    data() {
      return {
        visible: false,
        dataForm: {
          companyId: this.companyId,
          shopId: this.shopId,
          goodsCatId: null,
          goodsName: ''
        },
        // 商品类目
        goodsCats: [],
        goodsCatsTreeProps: {
          label: 'catName',
          children: 'children'
        },
        goodsList: [],
        cardTypes: [
          {label: '次卡', value:"1"},
          {label: '充值卡', value: "2"},
          {label: '积分卡', value: "3"},
          {label: '散客', value: "4"}
        ],
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
      }
    },
    components: {
    },
    activated() {
      this.visible = true
    },
    methods: {
      init(){
        this.visible = true
        this.$nextTick(() => {
          this.dataForm.companyId = this.companyId
          this.dataForm.shopId = this.shopId
          this.getGoodsCats()
          this.getGoodsList()
        })
      },
      // 行是否可选
      selectable(row,index){
        var cardType = this.cardType + ''
        return row.cardType.indexOf(cardType) > -1
      },
      // 添加商品
      addGoods(){
        this.visible = false
        this.$emit('add-goods-callback',this.dataListSelections)
      },
      cancel(){
        // 关闭回调
        this.visible = false
        this.$nextTick(() => {
          this.$emit('cancel')
        })
      },
      // 获取商品类目
      getGoodsCats() {
        this.goodsCats = []
        if (this.dataForm.companyId == null) {
          return
        }
        this.$http({
          url: this.$http.adornUrl('/merchant/goodsCat/getByCompany'),
          method: 'get',
          params: this.$http.adornParams({
            companyId: this.dataForm.companyId
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.goodsCats = treeDataTranslate(data.data);
          }
        })
      },
      // 商品分类选中事件
      handleGoodsCatClick(item, node, self) {
        this.dataForm.goodsCatId = item.id
        this.getGoodsList()
      },
      getGoodsList() {
        this.dataList = []
        if(this.companyId == null){
          return
        }
        this.dataListLoading = true;
        this.$http({
          url: this.$http.adornUrl('/merchant/goods/list'),
          method: 'get',
          params: this.$http.adornParams({
            page: this.pageIndex,
            limit: this.pageSize,
            companyId: this.companyId,
            shopId: this.shopId,
            goodsCatId: this.dataForm.goodsCatId,
            goodsName: this.dataForm.goodsName,
            cash: 'cash'
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list;
            this.totalPage = data.page.totalCount;
          } else {
            this.dataList = [];
            this.totalPage = 0;
          }
          this.dataListLoading = false;
        })
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val;
        this.pageIndex = 1;
        this.getDataList();
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val;
        this.getDataList();
      },
      // 多选
      selectionChangeHandle(val) {
        this.dataListSelections = val;
      },
      // 展现结账限制卡类型
      getCardTypeStr(cardType){
        var str = ""
        if(cardType == null || cardType == "" || cardType == undefined){
          return str
        }
        var cardTypeList = cardType.split(',')
        cardTypeList.forEach(item => {
          this.cardTypes.forEach(item1 => {
            if(item == item1.value){
              str += "," + item1.label
              return
            }
          })
        })
        return str.substring(1,str.length)
      },
    }
  }
</script>

<style scoped>
  .goods-cat .title-div {
    border-bottom: 1px solid #E0E0E0;
    padding: 10px 0 10px 5px;
    background-color: #eee;
    font-size: 18px;
  }

  .goods-cat .button-div {
    border-bottom: 1px solid #E0E0E0;
    padding: 5px 0 5px 0;
    text-align: center;
  }

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    padding-right: 8px;
  }

  .goods-cat-tree >>> .el-tree-node {
    border-bottom: 1px dashed #E0E0E0;
    padding: 5px 0;
  }

  .goods-cat-tree >>> .el-tree-node__children .el-tree-node {
    border-bottom: none;
    padding: 0;
  }

</style>
